<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #cat{
            width: 100%;
            height: 100%;
        }
        img{
            position: absolute;
        }
        #cymbal{
            right: 50px;
            bottom: 150px;
        }
        #drink{
            right: 50px;
            bottom: 100px;
        }
        #eat{
            right: 50px;
            bottom: 50px;
        }
        #fart{
            left: 50px;
            bottom: 50px;
        }
        #pie{
             left: 50px;
             bottom: 100px;
         }
        #scratch{
            left: 50px;
            bottom: 150px;
        }
    </style>
    <script>
        function cymbal1(){
            start("cymbal",13);
        }
        function drink1(){
            start("drink",80)
        }
        function eat1(){
            start("eat",39)
        }
        function fart1(){
            start("fart",27)
        }
        function pie1(){
            start("pie",23)
        }
        function scratch1(){
            start("scratch",55)
        }
        function cat1(){
            start("angry",25)
        }
        var timer=0;
        function start(name,count){
            var img=document.getElementById("cat");
            var index=0;

            clearInterval(timer);
            timer=setInterval(function (){
                if(index<count){
                    img.src="/static/img/game2/"+name+"/"+name+"_"+getIndex(index)+".jpg";
                    index++;
                }
            },60)
        }
        function  getIndex(index){
            if(index<10){
                return "0"+index;
            }else{
                return index;
            }
        }
    </script>
</head>

<body>
    <img src="/static/img/game2/angry/angry_00.jpg" id="cat" onclick="cat1()">
    <img src="/static/img/game2/Buttons/cymbal/cymbal.png" id="cymbal" onclick="cymbal1()">
    <img src="/static/img/game2/Buttons/drink/drink.png" id="drink" onclick="drink1()">
    <img src="/static/img/game2/Buttons/eat/eat.png" id="eat" onclick="eat1()">
    <img src="/static/img/game2/Buttons/fart/fart.png" id="fart" onclick="fart1()">
    <img src="/static/img/game2/Buttons/pie/pie.png" id="pie" onclick="pie1()">
    <img src="/static/img/game2/Buttons/scratch/scratch.png" id="scratch" onclick="scratch1()">
</body>
</html>
